<template>
  <div class="goodTec">
    <h1><span>好成绩</span><i></i>从好老师开始</h1>
    <ul class="ul-info">
      <li>
        <div class="text_wrap">
          <p class="row-1"><span>5k</span>人+</p>
          <p class="row-2">一线名师</p>
        </div>
      </li>
      <li>
        <div class="text_wrap">
          <p class="row-1"><span>2</span>年+</p>
          <p class="row-2">平均教龄</p>
        </div>
      </li>
      <li>
        <div class="text_wrap">
          <p class="row-1"><span>3W</span>次+</p>
          <p class="row-2">上门授课</p>
        </div>
      </li>
      <li>
        <div class="text_wrap">
          <p class="row-1"><span>97</span>%+</p>
          <p class="row-2">学生好评率</p>
        </div>
      </li>
    </ul>
    <div class="swiper-container swiper-container-horizontal">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="img_wrap"><img src="static/img/1.png" alt="老师照片" /></div>
          <div class="tec_info">
            华南师范大学
            <br /> 英语专业
            <i></i>研究生
          </div>
          <span class="tec_name">王老师</span>
        </div>
        <div class="swiper-slide">
          <div class="img_wrap"><img src="static/img/3.png" alt="老师照片" /></div>
          <div class="tec_info">
            中山大学
            <br /> 汉语言专业
            <i></i>研究生
          </div>
          <span class="tec_name">肖老师</span>
        </div>
        <div class="swiper-slide">
          <div class="img_wrap"><img src="static/img/4.png" alt="老师照片" /></div>
          <div class="tec_info">
            华南理工大学
            <br /> 应用数学
            <i></i>研究生
          </div>
          <span class="tec_name">骆老师</span>
        </div>
      </div>
    </div>
    <div class="nowGet" ref='nowget'>
      <img src="static/img/girl.png" class="pic_girl" alt="" />
      <div class="side-left">
        <p>0元请家教，名师面对面</p>
        仅限前100名
      </div>
      <div class="side-btn" @click="showAsk()">马上领取</div>
    </div>
    <popUp ref="popUp">
      <h3 class="form_title">0元请家教，名师面对面</h3>
      <p class="form_info">仅限前100名</p>
    </popUp>
    <div class="phone-pop" ref="telPop" style="display: none">
      <div class="cover"></div>
      <div class="phone-wrap">
        <div class="phone">呼叫15692003711</div>
        <div class="confirm">
          <div class="yes">
            <a href="tel:15692003711">确定</a>
          </div>
          <div class="no" @click="closePop()">取消</div>
        </div>
      </div>
    </div>
    <footer ref='footer'>
      <div style="display: none;">
        <img src="static/img/olask.png" alt="咨询" />
        <i></i>
        <b>在线咨询</b>
      </div>
      <div style="display: none;">
        <img src="static/img/tel.png" alt="拨打电话" />
        <i></i>
        <b>拨打免费电话</b>
      </div>
      <div class="right_up">
        <a href="javascript:;" class="olQue" onclick="doyoo.util.openChat('g=10078821');return false;"><img src="static/img/olask3.png" alt="在线咨询" /></a>
        <a href="javascript:;" class="callTel" @click="js_confirm()"><img src="static/img/tel3.png" alt="拨打电话" /></a>
      </div>

    </footer>
  </div>
</template>
<script>
import popUp from "./popUp"
import Bus from '../../static/js/bus.js'
export default {
  components: {
    popUp
  },
  data() {
    return {
      // titles: ['0元请家教，名师面对面','仅限前100名']
    }
  },
  created() {
  },
  mounted() {
    var self = this;
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 3
    });
    Bus.$on('changeToStatic',function(){
      self.$refs.nowget.style.position = 'static';
      self.$refs.footer.style.position = 'static';
    });
    Bus.$on('changeToFixed',function(){
      self.$refs.nowget.style.position = 'fixed';
      self.$refs.footer.style.position = 'fixed';
    })
  },
  methods: {
    showAsk() {
      this.$refs.popUp.showAsk()
    },
    js_confirm() {
      this.$refs.telPop.style.display = 'block';
    },
    closePop() {
      this.$refs.telPop.style.display = 'none';
    }
  }
}

</script>
<style>
.goodTec {
    height: 7.8rem;
    background-color: #f8f8f8;
}

.goodTec h1 {
  font-size: .36rem;
  padding-top: .2rem;
  margin-bottom: .2rem;
}

.goodTec h1 span {
  color: #fead29;
  font-weight: bold;
}

.goodTec h1 i {
  margin: 0 .15rem;
}

.ul-info {
  display: flex;
  justify-content: space-between;
}

.ul-info li {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 .24rem;
}

.text_wrap {
  width: 110%;
  text-align: center;
  padding-top: .32rem;
  font-size: .24rem;
  color: #7c7c7c;
  margin-left: -6%;
}

.row-1 {
  color: #fcc803;
}

.row-1 span {
  font-size: .36rem;
  font-weight: bold;
}

.swiper-container {
  margin-top: .2rem;
  width: 100%;
  height: 4.1rem;
}

.swiper-slide {
  position: relative;
  width: 3rem;
}

.img_wrap,
.img_wrap img {
  width: 100%;
}

.img_wrap {
  height: 2.6rem;
  overflow: hidden;
  background-color: #fff;
}

.tec_info {
  width: 100%;
  height: 1.14rem;
  background-color: #686868;
  font-size: .28rem;
  color: #fff;
  box-sizing: border-box;
  padding-top: .13rem;
}

.tec_info i {
  margin: 0 2px;
}

.tec_name {
  position: absolute;
  display: block;
  width: .4rem;
  padding-top: .2rem;
  right: 10px;
  top: 0;
  font-size: .32rem;
}

.nowGet {
  position: fixed;
  bottom: 0;
  z-index: 10;
  height: 1.05rem;
  width: 98%;
  border-radius: 0 1rem 1rem 0;
  background-color: rgba(0,0,0,.7);
  /*background-image: url(../../static/img/getBg.png);*/
  background-size: 100%;
  text-align: left;
}
.pic_girl {
  display: block;
  position: relative;
  left: .1rem;
  bottom: .3rem;
}
.nowGet>img {
  width: 1.25rem;
}

.side-left {
  position: absolute;
  left: 1.5rem;
  top: .12rem;
  font-size: .28rem;
  color: #fff;
}

.side-left p {
  font-size: .33rem;
  font-weight: bold;
}

.side-btn {
  position: absolute;
  right: .2rem;
  top: .18rem;
  font-size: .36rem;
  width: 1.8rem;
  height: .7rem;
  border-radius: 1rem;
  background-color: #0fc9fe;
  color: #fff;
  text-align: center;
  line-height: .7rem;
}

footer a {
  display: block;
  width: 1.2rem;
  /*height: 1.5rem;*/
  font-size: 0;
}
footer a img {
  width: 100%;
}

.right_up {
  position: fixed;
  top: 40%;
  right: 0;
}

.phone-pop .cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(49, 49, 49, 0.6);
  z-index: 11;
}

.phone-pop .phone-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 60%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  z-index: 15;
  font-size: .3rem;
  text-align: center;
  border-radius: 5px;
}

.phone-pop .confirm {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .2rem .5rem;
}

.phone-pop .phone-wrap .phone {
  padding: .2rem .5rem;
  border-bottom: 1px solid #cfcfcf;
}

</style>
